<template>
  <div class="w-full h-full flex flex-col">
    <MovieTitle :showback="true">{{ route.query.hallname }}</MovieTitle>
    <div class="content-box flex-1 overflow-auto">
      <van-skeleton :loading="isLoading" animate :row="7">
        <!-- 影厅信息 -->
        <ul
          class="flex justify-between w-[350px] h-[70px] ml-[19px] items-center"
        >
          <li class="flex flex-col justify-around">
            <div class="font-bold text-[18px]">{{ route.query.hallname }}</div>
            <div class="text-gray-500 text-[14px] truncate w-[280px]">
              {{ route.query.halladdress }}
            </div>
          </li>
          <li>
            <img
              src="../assets/img/address.svg"
              class="w-[30px] h-[30px]"
              alt=""
            />
          </li>
        </ul>
        <!-- 图片信息 -->
        <div
          class="
            swiper-box
            h-[150px]
            bg-gradient-to-tr
            from-gray-500
            to-gray-900
            py-[10px]
            box-border
          "
        >
          <Swiper
            class="h-full"
            :slides-per-view="4"
            :space-between="4"
            :centered-slides="true"
            @swiper="onSwiper"
            @slideChangeTransitionEnd="onSlideChangeTransitionEnd"
          >
            <SwiperSlide v-for="items in hallMovieList" :key="items.id">
              <img
                :src="baseURL + items.movieInfo.movie_pc"
                class="h-[96%] w-[96%]"
                alt=""
              />
            </SwiperSlide>
          </Swiper>
        </div>
        <!-- 电影信息 -->
        <ul class="pt-[10px]">
          <li class="flex justify-center">
            <div class="font-bold text-[18px]">
              {{ hallMovieInfo.movieInfo.movie_name }}
            </div>
            <div class="text-warningColor font-bold text-[18px] ml-2 mt-1">
              {{ hallMovieInfo.movieInfo.movie_score
              }}<span class="text-[12px]">分</span>
            </div>
          </li>
          <li class="flex justify-center">
            {{ hallMovieInfo.movieInfo.duration }}分钟|
            {{ hallMovieInfo.movieInfo.tags }}|
            <span class="truncate block w-[100px]">
              {{ hallMovieInfo.movieInfo.role }}</span
            >
          </li>
        </ul>
        <!-- 排片信息 -->
        <ul>
          <li
            class="
              flex
              border-0 border-b border-gray-300 border-dashed
              h-[70px]
              items-center
            "
          >
            <div class="w-[80px] text-[14px]">
              {{
                new Date(hallMovieInfo.movieInfo.publicTime).toLocaleString()
              }}
            </div>
            <div class="w-[80px] text-[12px] text-gray-500">
              {{ hallMovieInfo.hallInfo.tags }}
            </div>
            <div class="flex-1 text-warningColor flex justify-center">
              ${{ hallMovieInfo.price }}
            </div>
            <div class="w-[70px]">
              <button
                type="button"
                class="btn-buy"
                @click="tochoosesite(hallMovieInfo.id)"
              >
                购票
              </button>
            </div>
          </li>
        </ul>
      </van-skeleton>
    </div>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import MovieTitle from "../components/MovieTitle.vue";
import { useRouter, useRoute } from "vue-router";
import API from "../utils/index.js";
import { onMounted, ref, reactive } from "vue";
const isLoading = ref(true);
let baseURL = ref("http://www.softeem.xin:9999");
//获取路由管理对象
const router = useRouter();
const route = useRoute();
//用于保存获取到的带电影信息
const hallMovieList = ref([]);
// console.log(route.query.halladdress);
const queryParams = reactive({
  pageIndex: 1,
  mid: "",
  hid: route.query.hid,
  start_time: "",
  end_tim: "",
});
//定义用来保存当前所激活的swiperslide所对应的电影信息
const hallMovieInfo = ref([]);
API.planinfo.getListByPage(queryParams).then((res) => {
  // console.log(res);
  hallMovieList.value = res.data.listData;
  // 一个包含当前影厅所有影片信息的数组
  console.log(res.data.listData);
  hallMovieInfo.value = hallMovieList.value[0];
  isLoading.value = false;
});
//定义一个变量来保存swiper对象
const myswiper = ref();
// 初始化swiper
const onSwiper = (swiper) => {
  myswiper.value = swiper;
  //为swiper对象
  console.log(myswiper);
};

const onSlideChangeTransitionEnd = () => {
  console.log(myswiper.value.activeIndex);
  console.log(hallMovieList.value[myswiper.value.activeIndex]);
  hallMovieInfo.value = hallMovieList.value[myswiper.value.activeIndex];
};
const tochoosesite = (id) => {
  console.log(id);
  router.push({
    name: "chooseSite",
    query: {
      id: id,
    },
  });
};
</script>

<style lang="scss" scoped>
.btn-buy {
  @apply border border-solid border-primaryColor bg-white text-[12px]
   text-primaryColor w-[50px] h-[25px] rounded-[13px];
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.8);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}
</style>